<template>
    <div class="onlineEvaluation-template-box" :class="!isMobile?'is-mobile-information-table-content':''">
        <div class="onlineEvaluation-content" :class="!isMobile?'is-mobile-box-v-information':''">
            <div v-if="formState.dcb && formState.dcb.ftjzt !== '已完成'">
                <div class="title">教学评估调查表</div>
                <div class="questionnaire-top-text">
                    <div class="questionnaire-item">
                        <span class="bt-text-v">培训班名称：</span>
                        <span>{{ formState.px?formState.px.pxbmc:'' }}</span>
                    </div>
                    <div class="questionnaire-item">
                            <span class="bt-text-v">培训班主办单位：</span>
                            <span style="flex: 1;text-align: left;">{{ formState.px?formState.px.pxbzbdw:'' }}</span>
                    </div>
                    <div class="questionnaire-item">
                        <span class="bt-text-v">培训起止时间：</span>
                        <span>{{ formState.px?formState.px.pxsj:'' }}</span>
                    </div>
                </div>
                <div class="questionnaire-list-box">
                    <div class="xxList-item-box" v-for="(item,index) in formState.xxList" :key="index">
                        <div class="headline-bag-text">{{ index+1 }}、{{ item.type }}</div><!--标题1-->
                        <div class="xxList-list-box">
                            <div class="xxList-trem-box" v-for="(trem,tIndex) in item.list" :key="tIndex">
                                <div class="subheading-small-text">
                                    <span style="font-size: 20px;display: inline-block;" v-html="tIndex+2<9?('&#931'+(tIndex+2)+';'):('&#932'+(tIndex+2 - 9)+';')"></span>.{{ trem.fpgbt }}：{{ trem.fpgnr }}
                                </div>
                                <div class="radioGroup-box-v">
                                    <a-radio-group v-model="trem.fpgjg" @change="fpgjgChange(trem)">
                                        <a-radio v-for="(sum,aIndex) in radioGroupList" :key="aIndex" :value="sum">{{ sum }}</a-radio>
                                    </a-radio-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- jsjxpjList -->
                <div class="jsjxpjList-content-box">
                    <div style="text-align: center;font-size: 22px;font-weight: 600;">教师教学评价</div>
                    <div class="jsjxpjList-list-v">
                        <div v-for="(item,index) in formState.jsjxpjList" :key="index" class="jsjxpjList-for-v">
                            <table border="1" borderColor="#d9d9d9" style="width: 100%;">
                                <tr>
                                    <th style="width: 81px;">
                                        <span class="top-title-v">
                                            <span>姓</span>
                                            <span>名</span>
                                        </span>
                                    </th>
                                    <td>
                                        {{ item.name }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        教学时间及内容
                                    </th>
                                    <td>
                                        <div v-for="(trem,tIndex) in item.pxnrList">
                                            <span>{{ trem.pxsj }}</span> &ensp;
                                            <span>{{ trem.jxnr }}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>教学态度</th>
                                    <td>
                                        <a-radio-group v-model="item.pjnr.fjxtd" @change="jsjxpjChange({fjxtd:item.pjnr.fjxtd,id:item.pjnr.id})">
                                            <a-radio v-for="(sum,aIndex) in radioGroupList" :key="aIndex" :value="sum">{{ sum }}</a-radio>
                                        </a-radio-group>
                                    </td>
                                </tr>
                                <tr>
                                    <th>教学内容针对性</th>
                                    <td>
                                        <a-radio-group v-model="item.pjnr.fjxnrzdx" @change="jsjxpjChange({fjxnrzdx:item.pjnr.fjxnrzdx,id:item.pjnr.id})">
                                            <a-radio v-for="(sum,aIndex) in radioGroupList" :key="aIndex" :value="sum">{{ sum }}</a-radio>
                                        </a-radio-group>
                                    </td>
                                </tr>
                                <tr>
                                    <th>教学技巧与方法</th>
                                    <td>
                                        <a-radio-group v-model="item.pjnr.fjxjqyff" @change="jsjxpjChange({fjxjqyff:item.pjnr.fjxjqyff,id:item.pjnr.id})">
                                            <a-radio v-for="(sum,aIndex) in radioGroupList" :key="aIndex" :value="sum">{{ sum }}</a-radio>
                                        </a-radio-group>
                                    </td>
                                </tr>
                                <tr>
                                    <th>讲解突出重点难点</th>
                                    <td>
                                        <a-radio-group v-model="item.pjnr.fjjtczdnd" @change="jsjxpjChange({fjjtczdnd:item.pjnr.fjjtczdnd,id:item.pjnr.id})">
                                            <a-radio v-for="(sum,aIndex) in radioGroupList" :key="aIndex" :value="sum">{{ sum }}</a-radio>
                                        </a-radio-group>
                                    </td>
                                </tr>
                                <tr>
                                    <th>教学效果</th>
                                    <td>
                                        <a-radio-group v-model="item.pjnr.fjxxg" @change="jsjxpjChange({fjxxg:item.pjnr.fjxxg,id:item.pjnr.id})">
                                            <a-radio v-for="(sum,aIndex) in radioGroupList" :key="aIndex" :value="sum">{{ sum }}</a-radio>
                                        </a-radio-group>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div>
                        <div style="font-size: 16px;font-weight: 600;">您对本次培训的收获，以及意见和建议</div>
                        <a-textarea 
                            style="width: 100%;"
                            v-model:value="formState.dcb.fyjjy"
                            placeholder="请输入您对本次培训的收获，以及意见和建议"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            @blur="opinionBlur({fyjjy:formState.dcb.fyjjy,id:formState.dcb.id})"
                        ></a-textarea>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;margin-top: 20px;margin-bottom: 30px;">
                    <a-button  style="margin-right:10px;width: 60%;font-size: 16px;" class="blue-btn" icon="check-circle" type="primary" @click="submitTo()">提交</a-button>
                </div>
            </div>
            <div v-if="formState.dcb && formState.dcb.ftjzt == '已完成'">
                <a-result
                    status="success"
                    title="您已提交评价！"
                ></a-result>
                <div style="display: flex;justify-content: center;margin-top: 20px;">
                    <a-button class="green-btn" type="primary" icon="arrow-right" @click="goSignIn">去培训报名、培训签到或培训考试</a-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { 
    jcylxdjcjinitJcyJxpgdcb,
    jcylxdjcjupdatePgDcbXx,
    jcylxdjcjsubmitPgDcb,
    jcylxdjcjupdateJsjxpj,
    jcylxdjcjupdatePgDcb,
 } from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            initialData:{},
            formState:{},
            isMobile:false,
            radioGroupList:['满意','一般','不满意'],
        }
    },
    watch:{

    },
    mounted(){
        this.initialData = {id:this.$route.query.id,flxjhid:this.$route.query.flxjhid}
        if(this.initialData.id){
            this.getData()
        }
        window.addEventListener('resize', this.handleResize);
    },
    methods:{
        getData(){
            jcylxdjcjinitJcyJxpgdcb(this.initialData).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.formState = res.result
                }else{
                    
                }
            })
        },
        handleResize(){
            this.windowWidth = window.innerWidth;
            if (window.innerWidth <= 768) {
                this.isMobile = true;
            } else {
                this.isMobile = false;
            }
        },
        fpgjgChange(trem){
            jcylxdjcjupdatePgDcbXx({id:trem.id,fpgjg:trem.fpgjg}).then(res=>{
                if(res.code == 200){
                    this.getData()
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        jsjxpjChange(item){
            jcylxdjcjupdateJsjxpj(item).then(res=>{
                if(res.code == 200){
                    this.getData()
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        opinionBlur(item){
            jcylxdjcjupdatePgDcb(item).then(res=>{
                if(res.code == 200){
                    this.getData()
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        setChineseNum(arabicNumber){//阿拉伯数字变中文数字
            const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
            const units = ['', '十', '百', '千', '万', '亿'];

            if (typeof arabicNumber !== 'number' || arabicNumber < 0 || arabicNumber > 99999999999) {
            return '';
            }

            let str = '';
            let j = 0;
            let unitPos = 0;
            let num = Math.abs(arabicNumber);

            while (num > 0) {
            let p = num % 10;
            num = Math.floor(num / 10);
            if (p === 0) {
                if (str === '' || str[str.length - 1] !== chineseNumbers[0]) {
                str = chineseNumbers[0] + str;
                }
            } else {
                if (str !== '') {
                str = units[unitPos] + chineseNumbers[p] + str;
                } else {
                str = chineseNumbers[p] + str;
                }
            }
            if (++unitPos === units.length && str[str.length - 1] !== chineseNumbers[0]) {
                str += chineseNumbers[0];
                unitPos = 0;
            }
            }

            // 处理特殊情况，例如 1001 => 一千零一，而不是 一千零零一
            str = str.replace(/零+/g, '零').replace(/^零/g, '');

            return str;
        },
        submitTo(){//提交
            let that = this
            this.$confirm({
            title:'确认要提交吗？',
            // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    jcylxdjcjsubmitPgDcb({fpgdcbid:that.formState.dcb.id,}).then(res=>{
                        if(res.code == 200){
                            that.getData()
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
            
        },
        goSignIn(){
            var a = document.createElement('a');
            a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'selectionRegistrationSelectType?id='+this.initialData.id+'&flxjhid='+this.initialData.flxjhid
            a.click();
        }
    }
}
</script>
<style lang="less">
.onlineEvaluation-template-box{
    .onlineEvaluation-content{
        padding: 10px 15px;
        // text-align: center;
        .title{
            font-family: 'fangzhengxiaobiao' !important;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
        }
        .questionnaire-top-text{
            margin-top: 10px;
            padding: 0 5px;
            .questionnaire-item{
                display: flex;
                align-items: center;
                .bt-text-v{
                    font-size: 16px;
                    font-weight: 600;
                }
            }
            
        }
    }
    .questionnaire-list-box{
        margin-top: 20px;
        .xxList-item-box{// 第一个循环
            margin-top: 10px;
            .headline-bag-text{//大标题
                font-size: 18px;
                font-weight: 600;
            }
            .xxList-list-box{
                padding: 8px 10px;
                .xxList-trem-box{//第二个循环
                    .subheading-small-text{//小标题
                        font-size: 16px;
                        // font-weight: 600;
                    }
                    .radioGroup-box-v{
                        padding: 8px 10px;
                        .ant-radio-inner{
                            width: 18px;
                            height: 18px;
                        }
                        .ant-radio-inner::after{
                            width: 10px;
                            height: 10px;
                        }
                        .ant-radio-wrapper{
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
    .jsjxpjList-content-box{
        .jsjxpjList-list-v{
            margin: 10px 0;
            th,td{
                padding: 8px;
                font-size: 16px;
            }
            .top-title-v{
                display: flex;
                justify-content: space-between;
            }
            .jsjxpjList-for-v{
                margin-bottom: 15px;
            }
            .ant-radio-inner{
                width: 18px;
                height: 18px;
            }
            .ant-radio-inner::after{
                width: 10px;
                height: 10px;
            }
            .ant-radio-wrapper{
                font-size: 18px;
            }
        }
    }
}
.is-mobile-information-table-content{
    display: flex;
    justify-content: center;
    background-color: #f0f2f5;
    .is-mobile-box-v-information{
        width: 500px;
        background-color: #fff;
        margin: 8px 0;
        height: calc(100vh - 16px);
        box-shadow: 0px 0px 11px rgba(158, 188, 229, 0.8);
        overflow: auto;
        .inspector-information-bottom-v{
            height: calc(100vh - 168px);
        }
    }
}
</style>